import React, { useRef, useState } from 'react';
import * as datetime from '@/utils/datetime';
import DataEdit from '@/components/base/DataEdit';
import { Button, message } from 'antd';
import PageHeader from '@/components/page/PageHeader';
import DataTable from '@/components/base/DataTable';
const daoName = 'UserChangeDivi';
const columns: API.Column[] = [
  {
    title: '转出员工',
    width: 120,
    sorter: true,
    key: 'YEMID',
    dataIndex: ['User', 'Name'],
    render: (_text, record) =>
      record.User.Name === '' ? '' : record.User.Name + '(' + record.User.No + ')',
    dispaly: true,
    filter: false,
  },
  {
    title: '认定日期',
    width: 120,
    sorter: true,
    key: 'DSDT',
    dataIndex: 'DSDT',
    render: (_text, record) => datetime.format(record.DSDT, 'yyyy-MM-dd'),
    dispaly: true,
    filter: true,
  },
  {
    title: '转出业绩',
    width: 200,
    sorter: true,
    key: 'ZYFS',
    dataIndex: 'ZYFSCaptions',
    dispaly: true,
    filter: true,
  },
  {
    title: '转入员工',
    width: 120,
    sorter: true,
    key: 'NEMID',
    dataIndex: ['User1', 'Name'],
    render: (_text, record) =>
      record.User1.Name === '' ? '' : record.User1.Name + '(' + record.User1.No + ')',
    dispaly: true,
    filter: false,
  },
];
const controls: API.Control[] = [
  {
    name: 'YEMID',
    label: '转出员工',
    type: 'search',
    grid: 12 / 24,
    rules: [{ required: true, message: '转出员工不能为空' }],
    fetch: {
      tableName: 'User',
      searchColumns: ['No', 'Name'],
      optionTpl: 'Name',
      valueTpl: 'ID',
      isDao: true,
    },
    dataType: 'number',
  },
  {
    name: 'DSDT',
    label: '认定日期',
    type: 'date',
    grid: 12 / 24,
    dataType: 'date',
    rules: [{ required: true, message: '认定日期不能为空' }],
  },
  {
    name: 'ZYFS',
    label: '转出业绩',
    rules: [{ required: true, message: '转出业绩不能为空' }],
    options: [
      { value: '1', label: '对公存款业绩' },
      { value: '2', label: '对公贷款业绩' },
      { value: '3', label: '个人存款业绩' },
      { value: '4', label: '个人贷款业绩' },
    ],
    grid: 24 / 24,
    layout: { labelSpan: 3, wrapperSpan: 21 },
    type: 'checkbox-group',
  },
  {
    name: 'NEMID',
    label: '转入员工',
    type: 'search',
    grid: 12 / 24,
    rules: [{ required: true, message: '转入员工不能为空' }],
    fetch: {
      tableName: 'User',
      searchColumns: ['No', 'Name'],
      optionTpl: 'Name',
      valueTpl: 'ID',
      isDao: true,
    },
    dataType: 'number',
  },
];
const UserChangeDiviForm: React.FC = () => {
  const tableRef = useRef<API.TableAction>();
  const [xs, setXs] = useState<boolean>(false);
  const submit = async () => {
    if (tableRef.current) {
      message.info('设置成功');
      setXs(false);
      tableRef.current?.reload();
    }
  };
  return (
    <PageHeader>
      <div style={{ marginTop: -5, marginBottom: 10 }}>
        <Button
          type="primary"
          key="1"
          onClick={() => {
            setXs(true);
          }}
        >
          设置业绩转移
        </Button>
      </div>
      <DataTable
        actionRef={tableRef}
        daoName={daoName}
        columns={columns}
        controls={controls}
        title="员工调动"
        pageSize={20}
        initSorter={{ FieldName: 'DSDT', Direction: 'DESC' }}
      />
      <DataEdit
        showType="modal"
        layout="vertical"
        title="员工调动"
        keyColName="ID"
        daoName={daoName}
        controls={controls}
        onSumit={submit}
        visible={xs}
        onVisibleChange={(visible) => {
          setXs(visible);
        }}
        renderButtons={(p) => {
          return [
            <Button type="primary" key="save" onClick={() => p.form?.submit?.()}>
              保存
            </Button>,
            <Button
              type="ghost"
              key="close"
              onClick={() => {
                setXs(false);
              }}
            >
              关闭
            </Button>,
          ];
        }}
      />
    </PageHeader>
  );
};
export default UserChangeDiviForm;
